<template>
	<view class="microShareholder-container">
		<view class="sticky-box">
			<view class="top-overview flexWrapNo">
				<view class="item">
					<text class="value">{{devidenInfo.totalDividend||0}}</text>
					<text class="label">总分红</text>
				</view>
				<view class="item">
					<text class="value">{{devidenInfo.issued||0}}</text>
					<text class="label">已发放</text>
				</view>
				<view class="item">
					<text class="value">{{devidenInfo.toBeIssued||0}}</text>
					<text class="label">待发放</text>
				</view>
			</view>
			
			<view class="search-box" @tap="shopFlag=!shopFlag">
				<text>{{storeName}}</text>
				<uni-icons type="up" size="14" color="#fff" v-if="shopFlag"></uni-icons>
				<uni-icons type="down" size="14" color="#fff" v-else></uni-icons>
			</view>
			<view class="shop-list flexWrapNo" v-if="shopFlag">
				<view class="shop-item" 
					:class="{active:item.storeId==storeId}"
					v-for="(item,k) in storeList" 
					:key="k"
					@tap="chooseShop(item)">
					{{item.storeName}}
				</view>
			</view>
		</view>
			
		<view class="shareholder-list">
			<view class="shareholder-item" v-for="(item,index) in list" :key="index">
				<view class="info-item shop-name"> 
					<view>{{item.storeName}}</view>
					<view class="more" @tap="goPage(`/micro-shareholder/storeDividendRecord?storeId=${item.storeId}`)">查看门店分红记录
						<uni-icons type="right" size="14" color="rgba(255,255,255,0.7)"></uni-icons>
					</view>
				</view>
				<view class="flexWrap">
					<view class="info-item">
						<text>购买时间</text>{{item.purchaseTime||'-'}}
					</view>
					<view class="status blue"  v-if="item.isEffective==1">有效</view>
					<view class="status white flexWrapNo" v-if="item.isEffective==0">
						已到期
						<view class="blue" style="margin-left: 8rpx;" @tap="renewPurchase(item.storeId)">续购<uni-icons type="right" size="14" color="#26BCFD"></uni-icons></view>
					</view>
				</view>
				<view class="flexWrap">
					<view class="info-item">
						<text>开始分红日期</text>{{item.dividendDate||'-'}}
					</view>
					<view class="info-item" v-if="item.cooperationPeriod==1">
						<text>分红截止日期</text>长期有效
					</view>
					<view class="info-item" v-else>
						<text>分红截止日期</text>{{item.dividendBy||'-'}}
					</view>
				</view>
				<view class="detail flexWrapNo">
					<view class="detail-item flexWarpCenterColumn">
						<text class="value">{{item.shares||0}}</text>
						<text class="label">购买股数</text>
					</view>
					<view class="detail-item flexWarpCenterColumn">
						<text class="value">{{item.amount||0}}</text>
						<text class="label">购买金额</text>
					</view>
					<view class="detail-item flexWarpCenterColumn">
						<text class="value special" @tap="goPage(`/micro-shareholder/selfShareBonusRecord?storeId=${item.storeId}&type=1`)">{{item.toBeIssued||'暂无'}}</text>
						<text class="label">待发放分红</text>
					</view>
					<view class="detail-item flexWarpCenterColumn">
						<text class="value special" @tap="goPage(`/micro-shareholder/selfShareBonusRecord?storeId=${item.storeId}`)">{{item.issued||'暂无'}}</text>
						<text class="label">累计分红</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 银行卡信息弹窗 -->
		<uni-popup ref="popup" type="center" :is-mask-click="false" mask-background-color="rgba(0,0,0,0.7)">
			<view class="popup-content">
				<view class="title">银行卡信息</view>
				<view class="form">
					<view class="form-item">
						<text class="lable">户名</text>
						<input class="input-box" type="text" 
							v-model="accountName"  
							placeholder="请输入户名" 
							placeholder-class="placeholderClass"/>
					</view>
					<view class="form-item">
						<text class="lable">银行</text>
						<picker :value="bankIndex" :range="bankArray" @change="bankChange">
							<view class="uni-input" v-if="bankIndex!=null">{{bankArray[bankIndex]}}</view>
							<view class="custom-placeholder" v-else>请选择</view>
						</picker>
					</view>
					<view class="form-item">
						<text class="lable">卡号</text>
						<input class="input-box" type="number" 
							v-model="accountNo" 
							maxlength="19"
							placeholder="请输入卡号" 
							placeholder-class="placeholderClass" />
					</view>
				</view>
				<view class="tips">请填写银行卡信息用于分红转账，可在“我的-银行卡”修改</view>
				<view class="submit-btn" @tap="submit">确认提交</view>
			</view>
		</uni-popup>	
	</view>
</template>

<script>
	import utils from '@/common/lib/util.js'
	export default{
		data(){
			return{
				shopFlag:false,
				storeName:'全部门店',
				storeId:null,
				storeList:[],
				devidenInfo:{}, // 分红数据
				list:[],
				
				accountName:'', // 开户名
				accountBank:'',  // 开户行
				accountNo:'', // 银行卡号
				
				bankIndex:null,
				bankArray:[
					'中国建设银行','中国农业银行','中国工商银行','中国邮政储蓄银行',
					'中国银行','招商银行','中信银行','交通银行','浦发银行','华夏银行',
					'兴行银行','平安银行','中国民生银行','广发银行','光大银行'
				],
				
				page: 1,
				size: 20,
				showEmpty: true,
				showLoadStatus: false,
				more: true,
				contentText: {
					contentdown: '上拉加载更多~',
					contentrefresh: '加载中...',
					contentnomore: '已经到底了~~'
				},
				status: 'loading',
			}
		},
		onLoad() {
			this.getStore()
			this.getdividendStat()
			this.getList()
		},
		onShow() {
			// 查看是否有银行卡信息
			this.getBank()
		},
		methods:{
			chooseShop(item){
				this.storeName=item.storeName
				this.storeId=item.storeId
				this.shopFlag=false
				this.freshList()
			},
			
			bankChange(e){
				this.bankIndex=e.detail.value
				this.accountBank=this.bankArray[this.bankIndex]
			},
			
			freshList(){
				this.page = 1
				this.more = true
				this.status = 'loading'
				this.list = []
				this.getList();
			},
			
			// 获取分红统计数据
			getdividendStat(){
				this.$request.post(this.$api.dividendStat, {
					adminId:uni.getStorageSync('user_id'),
				}, {
					isJava: true
				}).then(res => {
					if(res.code==200){
						let {
							data = {}
						} = res;
						this.devidenInfo = data
					}
				})
			},
			
			// 获取购买股份的门店
			getStore(){
				this.$request.post(this.$api.purchasedStore, {
					adminId:uni.getStorageSync('user_id'),
				}, {
					isJava: true
				}).then(res => {
					if(res.code==200){
						let {
							data = {}
						} = res;
						
						let storeItem={
							storeName:'全部门店',
							storeId:null,
						}
						this.storeList=data||[]
						this.storeList.unshift(storeItem);
					}
				})
			},
			
			// 获取购买的股份列表
			getList(){
				this.$request.post(this.$api.purchasedRecordList, {
					adminId:uni.getStorageSync('user_id'),
					storeId:this.storeId,
					pageNum:this.page++,  //当前页数
					pageSize:this.size,  //当前条数
				}, {
					isJava: true
				}).then(res => {
					if(res.code==200){
						let {
							data = {}
						} = res;
						let newArray = data.list
						
						if (newArray.length == 0 && this.page == 2) {
							this.showEmpty = true
							this.showLoadStatus = false
							this.more = false // 不能再次请求了
							return false;
						} else {
							this.showLoadStatus = true
							this.more = true
							this.showEmpty = false
							this.status = 'loading'
						}
						if (newArray.length < this.size) { // 说明没有更多数据
							this.status = 'noMore'
							this.more = false
							this.showEmpty = false
						}
						this.list = this.list.concat(newArray);
					}
				})
			},
			
			// 获取股东银行卡信息 -- 有信息：不弹出
			getBank(){
				this.$request.get(this.$api.getBank, {
					adminId:uni.getStorageSync('user_id'),
				}, {
					isJava: true
				}).then(res => {
					if(res.code==200){
						let {
							data = {}
						} = res;
						if(!data){
							this.$refs.popup.open()
						}
					}
				})
			},
			
			closePopup(){
				this.$refs.popup.close()
			},
			
			// 提交银行卡信息
			submit:utils.debounce(function(){
				if(!this.accountName){
					this.$tools.showToast('请填写户名')
					return
				}else if(!this.accountBank){
					this.$tools.showToast('请选择银行')
					return
				}else if(!this.accountNo){
					this.$tools.showToast('请填写卡号')
					return
				}
				
				this.$request.post(this.$api.addBank, {
					adminId:uni.getStorageSync('user_id'),
					accountName:this.accountName,
					accountBank:this.accountBank,
					accountNo:this.accountNo,
				}, {
					isJava: true
				}).then(res => {
					if(res.code==200){
						this.closePopup()
						this.$tools.showToast('提交成功')
					}
				})
			},1000),
			
			// 续购
			renewPurchase(storeId){
				wx.navigateToMiniProgram({	
				  appId: 'wx3942f22f0e5b4bba',
				  path: '/moduleE/microShoreholder?storeId='+storeId+'&current=1',
				  envVersion: 'trial',//release trial
				  success(res) {
				    // 打开成功
					console.log(res)
				  },
				  fail(err) {
				  	console.log(err)
				  }
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.microShareholder-container{
		padding: 0 28rpx;
		padding-bottom: 80rpx;
	}
	.sticky-box{
		background: #040336;
		padding: 28rpx 0 30rpx 0;
		position: sticky;
		top:0;
	}
	.top-overview{
		padding: 20rpx 40rpx;
		justify-content: space-between;
		gap: 40rpx;
		.item{
			display: flex;
			flex-direction: column;
			align-items: center;
			.value{
				color:rgba(255,255,255,1);
				font-size: 30rpx;
				font-weight: bold;
			}
			.label{
				margin-top: 4rpx;
				color:rgba(255,255,255,0.6);
				font-size: 26rpx;
			}
		}
		.look{
			color:#26BCFD ;
			font-size: 30rpx;
		}
	}
	
	.search-box{
		padding: 10rpx 16rpx;
		color: #fff;
		font-size: 28rpx;
		gap: 6rpx;
		border: 2rpx solid rgba(255,255,255,0.3);
		border-radius:8rpx;
		display: inline-flex;
		position: relative;
	}
	
	.shop-list{
		margin-top: 20rpx;
		flex-wrap: wrap;
		gap: 20rpx;
		.shop-item{
			padding: 0 20rpx;
			height: 64rpx;
			line-height: 64rpx;
			background: #1D1C5C;
			border-radius: 64rpx;
			color: #fff;
			font-size: 28rpx;
			text-align: center;
		}
		.active{
			background: #26BCFD;
		}
	}
	
	.shareholder-list{
		// margin-top: 30rpx;
		.shareholder-item{
			padding: 20rpx;
			border: 2rpx solid rgba(255,255,255,0.3);
			border-radius:8rpx;
			margin-bottom: 20rpx;
			.info-item{
				font-size: 28rpx;
				color: rgba(255,255,255,1);
				display: flex;
				margin-bottom: 10rpx;
				text{
					min-width: 100rpx;
					color: rgba(255,255,255,0.7);
					margin-right: 20rpx;
				}
			}
			.status{
				font-size: 24rpx;
				margin-bottom: 20rpx;
			}
			.blue{
				color: #26BCFD;
			}
			.white{
				color: rgba(255,255,255,0.5);
			}
			
			.shop-name{
				justify-content: space-between;
				margin-bottom: 30rpx;
				.more{
					font-size: 24rpx;
					color: rgba(255,255,255,0.7);
				}
			}
			.detail{
				margin-top: 20rpx;
				gap: 40rpx;
				justify-content: center;
				.detail-item{
					.value{
						color:rgba(255,255,255,1);
						font-size: 30rpx;
						font-weight: bold;
					}
					.label{
						margin-top: 4rpx;
						color:rgba(255,255,255,0.6);
						font-size: 26rpx;
					}
					.special{
						color:#26BCFD;
					}
				}
			}
		}
	}
	
	.popup-content{
		width: 550rpx;
		background:#1A195F;
		border-radius: 16rpx;
		padding: 30rpx;
		position: relative;
		.close-icon{
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}
		.title{
			font-size: 32rpx;
			font-weight:bold;
			text-align: center;
			color: #fff;
		}
		
		/deep/.form{
			margin-top: 50rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 30rpx;
			.form-item{
				display: flex;
				align-items: center;
				gap: 20rpx;
				width: 90%;
				.lable{
					flex-shrink: 0;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #fff;
					line-height: 33rpx;
				}
				.input-box{
					font-size: 28rpx;
					width: 100%;
					border-radius: 16upx;
					border: 2rpx solid rgba(45,50,135,0.5);
					padding: 20rpx 10rpx;
					background: #312F80;
					color: #FFFFFF;
	
				}
				picker{
					width:100%;
					font-size: 26rpx;
					border-radius: 16upx;
					border: 2rpx solid rgba(45,50,135,0.5);
					padding:26rpx 10rpx;
					background: #312F80;
					color: #FFFFFF;
				}
				
				.placeholderClass{
					font-family: PingFang SC, PingFang SC;
					font-size: 28rpx;
					color: rgba(255,255,255,0.6);
					line-height: 33rpx;
				}
				
				.custom-placeholder{
					font-size: 28rpx;
					color: rgba(255,255,255,0.6);
					line-height: 33rpx;
				}
			}
		}
		.tips{
			margin-top: 20rpx;
			font-size: 24rpx;
			color: rgba(255,255,255,0.6);
		}
		.submit-btn{
			width: 100%;
			height: 90rpx;
			margin: 30rpx 0;
			background: #26BCFD;
			border-radius: 72rpx;
			font-size: 34rpx;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>